Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Laggy Map Dragging on Mobile with Dark Mode Enabled #42

Merged
merged 3 commits into from
Nov 13, 2024

Conversation

fityannugroho
Copy link
Owner

@fityannugroho fityannugroho commented Nov 12, 2024

PR Checklist

Please check if your PR fulfills the following requirements:

Put [x] to check

  • I have read the documentation.
  • I have read and followed the Contributing Guidelines.
  • I have included a pull request description of my changes.
  • I have included the necessary changes to the documentation.
  • I have added tests to cover my changes.

PR Type

What kind of change does this PR introduce?

Please check any kind of changes that applies to this PR using [x]

  • Bug fix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • ..... (describe the other type)

What is the current behavior?

Please describe the current behavior that you are modifying, or link to a relevant issue.

Issue Number: N/A

Currently, the map experiences lag when dragged on mobile devices with dark mode enabled. The primary cause of this lag is the implementation of dark mode using Tailwind CSS on the map tiles. This setup requires each tile to undergo additional processing to apply the dark theme, resulting in delays that impact performance, especially on mobile.

What is the new behavior?

This pull request includes significant changes to the map component and its dependencies, focusing on improving the map rendering and theming capabilities. The most important changes include the creation of a new TileLayer component, updates to the Map component, and modifications to the package dependencies.

Map Component and TileLayer Enhancements:

  • components/map.tsx: Updated to use the new TileLayer component and added a maxZoom property to the MapContainer. [1] [2]
  • components/tile-layer.tsx: Created a new TileLayer component that integrates with Maplibre GL and dynamically updates the map style based on the current theme.

Dependency Updates:

Other information

None

Copy link

vercel bot commented Nov 12, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
idn-area-map ✅ Ready (Inspect) Visit Preview 💬 Add feedback Nov 13, 2024 3:29am

@fityannugroho fityannugroho changed the title Improve map performace in mobile device with dark mode Fix Laggy Map Dragging on Mobile with Dark Mode Enabled Nov 13, 2024
@fityannugroho fityannugroho merged commit e6bb687 into main Nov 13, 2024
5 checks passed
@fityannugroho fityannugroho deleted the perf/map branch November 13, 2024 03:39
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant